An Example of Grid vs Flexbox

An excellent way to use flexbox and grid together is by creating the layout of a webpage with grid and then organizing the flow of the content with flex. Let's see an example of this!

To use CSS Grid set the display property of the container element to grid.

Recap

CSS Grid v. Flexbox

• Grid is two dimensional, while Flex is one
• Grid is layout first, while Flexbox is content first
• Flex is for components of an app, Grid is for the app layout itself

CSS Grid does not replace Flexbox. Each can achieve things that the other is not capable of, and in fact, a true master can use Flexbox and CSS Grid together in harmony to create the ultimate webpage layout.

At the highest level CSS Grid excels at creating layouts for a webpage, while Flexbox is a master of content flow for each element that makes up the page layout.

Further Research

For more information on CSS Grid and Flexbox together see the articles below:

• Beginner’s Guide to choosing between CSS Grid and Flexbox
• The Ultimate CSS Battle: Grid vs. Flexbox
• Does CSS Grid Replace Flexbox?